/************
 * Nautilus *
 ************/
// based css:
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/Adwaita.css
// hard-coded css:
// https://git.gnome.org/browse/nautilus/tree/src/resources/css/nautilus.css

.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background: $base_color;
}

.nautilus-window notebook > header.top tabs, 
.nautilus-window notebook > header.bottom tabs {
    padding-left: 0;
    padding-right: 0;
}

.nautilus-window notebook > header.left tabs, 
.nautilus-window notebook > header.right tabs {
    padding-top: 0;
    padding-bottom: 0; 
}

.nautilus-canvas-item {
  // border-radius: $md_radius;
}

.nautilus-canvas-item.dim-label,
.nautilus-list-dim-label {
  // @extend .dim-label;
}

.nautilus-desktop.nautilus-canvas-item {
  // background-color: scale-alpha(#000000, $lower_opacity);
  color: $inversed_fg_color;
  text-shadow: $z-depth-1;
}

.nautilus-desktop.nautilus-canvas-item:selected {
  // color: $inversed_fg_color;
  text-shadow: none;
}

filechooser,
.nautilus-window {

  placessidebar.sidebar {

     separator,
     .separator {
       min-height: 1px;
       border-color: $borders_color;
       background-color: $borders_color;
     }

    row.sidebar-row {
      padding: 0;
      &:hover {
        color: if($color =='black', $darker_contrast_color, $primary_color);
        background-color: transparent;
        box-shadow: inset 3px 0 if($color =='black', $darker_contrast_color, $primary_color);
      }

      &:active { box-shadow: inset 3px 0 $primary_color; }
      &:backdrop { opacity: 0.85; }

      &:selected {
        &:active { box-shadow: none; }
        &:hover { box-shadow: none; color:$dark_contrast_color; background-color: scale-alpha($primary_color, 0.8); }
      }
    }
  }
}

// Toolbar
@keyframes needs_attention_keyframes {
  from { background-color: transparent; }
  to { background-color: $track_color; }
}

.nautilus-operations-button-needs-attention {
  color: $accent_color;
  animation: needs_attention_keyframes $longer_duration $standard_curve 2 alternate;
}

.nautilus-operations-button-needs-attention-multiple {
  color: $accent_color;
  animation: needs_attention_keyframes $longer_duration $standard_curve 4 alternate;
}

// Floating status bar
.nautilus-window .floating-bar {
  @extend %osd;

  // @extend .toolbar.osd;

  min-height: 32px;
  padding: 0;
  border-style: solid solid none;
  border-width: 1px;
  border-color: $borders_color;
  border-radius: (2px + 1px) (2px + 1px) 0 0;
  background-color: $base_color;
  background-clip: $extra_background_clip;
  transition: $longer_transition, border-width 0;

  &.bottom.left { // axes left border and border radius
    margin-right: 8px - 1px;
    border-left-style: none;
    border-top-left-radius: 0;
  }

  &.bottom.right { // axes right border and border radius
    margin-left: 8px - 1px;
    border-right-style: none;
    border-top-right-radius: 0;
  }

  button {
    margin: (32px - $small_size) / 2;

    @extend %small_button;
  }
}

.disk-space-display {
  // border-style: solid;
  // border-width: 2px;
}

.disk-space-display.unknown {
  background-color: $warning_color;
}

.disk-space-display.used {
  background-color: $primary_color;
}

.disk-space-display.free {
  background-color: $track_color;
  color: $disabled_fg_color;
}

// View
.nautilus-list-view .view {
  // border-bottom: 1px solid $borders_color;
}

// Hide superfluous treeview drop target indication
.nautilus-list-view .view.dnd {
  // border-style: none;
}

// Libgd tag entries in the search. Sadly it requires this copy pasted css style.
// https://git.gnome.org/browse/libgd/tree/libgd/gd-tagged-entry-default.css
.documents-entry-tag {
  // min-height: 24px;
  margin: 3px -2px 3px 8px;
  padding: 0 8px;
  border-radius: $circular_radius;
  box-shadow: none;
  background-color: $primary_color;
  color: $inversed_fg_color;

  &:hover { box-shadow: $z-depth-1; }
}

.documents-entry-tag.button {
  // @extend %simple_flat_button;

  // min-height: 24px;
  // min-width: 24px;
  margin: 0 -2px;
  padding: 4px;
  border-radius: $circular_radius;
  box-shadow: none;
  color: $secondary_inversed_fg_color;

  &:hover, &:active { color: $inversed_fg_color; }
}

// Workaround for the double border of the searchbar since we use a revealer which
// always allocates at least 1 pixel
.nautilus-window searchbar { border-top: 1px solid $borders_color; }

.nautilus-window .searchbar-container { margin-top: -1px; }

.nautilus-window headerbar > revealer > button { @extend %circular_button; }


/*********
 * gedit *
 *********/

.open-document-selector-treeview:hover {
}

.open-document-selector-treeview:selected:hover {
}

/* Only normal state is handle */
.open-document-selector-name-label {
  font-weight: bold;
}

/* Only normal state is handle */
.open-document-selector-path-label {
  color: gtkalpha(currentColor, $hint_opacity);
  font-size: smaller;

  // @extend .dim-label;
}

.gedit-document-panel {
  background-color: $lighter_bg_color;
  box-shadow: inset 1px 0 $borders_color;

  row.activatable { padding: 6px 4px; }
}

.gedit-document-panel row:selected {
}

.gedit-document-panel-group-row,
.gedit-document-panel-group-row:hover {
  border-top: 1px solid gtkalpha(currentColor, 0.3);
}

.gedit-document-panel-group-row:first-child,
.gedit-document-panel-group-row:first-child:hover {
  border-top: 0px;
}

/* Try to look as the notebook tab close button */
.gedit-document-panel row button.flat {
  @extend %small_button;
}

.gedit-side-panel-paned statusbar {
  border-top: 1px solid $borders_color;
}

.gedit-search-slider {
  margin: 4px 4px 8px;

  .gedit-search-entry-occurrences-tag {
    all: unset;
    padding: 0 4px;
    color: gtkalpha(currentColor, $hint_opacity);
  }

  popover.background {
    transition: $shadow_transition;
    padding: 0;
    box-shadow:  $z-depth-2; // TODO: this should really have a highlight
    background-color: $dark_contrast_color;
    }

  entry {
    &:dir(ltr) {
      margin-right: -$medium_size * 2;
      padding-right: $medium_size * 2 + 8px;

      .gedit-search-entry-occurrences-tag { margin-right: -8px; }
    }

    &:dir(rtl) {
      margin-left: -$medium_size * 2;
      padding-left: $medium_size * 2 + 8px;

      .gedit-search-entry-occurrences-tag { margin-left: -8px; }
    }

    &.error ~ button {
      color: $secondary_inversed_fg_color;

      &:hover, &:active { color: $inversed_fg_color; }

      &:disabled { color: $disabled_secondary_inversed_fg_color; }
    }
  }

  button {
    @extend %simple_flat_button;

    &:dir(ltr),
    &:dir(rtl) { @extend %linked; }
  }
}

// Yeah this is ugly
.gedit-search-slider .linked:not(.vertical) > entry,
notebook > stack:not(:only-child) revealer .gedit-search-slider .linked:not(.vertical) > entry {
  border-radius: 2px;
}

/**************
 * Tweak Tool *
 **************/
// hard-coded css:
// https://git.gnome.org/browse/gnome-tweak-tool/tree/data/shell.css

// the sidebar
.tweak-categories {
  // padding: 4px 0;
  // background-color: shade(@theme_bg_color, 0.99);
  background-image: image($lighter_bg_color);

  // hide separators
  separator {
    min-width: 0;
    min-height: 0;
    background: transparent;
  }
}

.tweak {
  padding: 3px;
  // padding-top: 3px;

  &.title:hover { box-shadow: none; }
}

.tweak-group-white,
.tweak-white,
.tweak-white:hover {
  // background-color: white;
  background-image: image($base_color);
}

.tweak-startup,
.tweak-startup:hover {
  // background-color: lighter(shade(@theme_bg_color, 0.9));
  background-image: image($base_color);
}

.tweak-group-startup {
  // background-color: @view_separators;
  background-image: image($base_color);
  border: 1px solid $borders_color;
}

//
//  * Gnome-Logs *
//

window.background > box.vertical box.horizontal {

  > box.vertical > scrolledwindow > viewport.frame > list { // right-pane

    // > 3.25.90
    row.event.activatable {
      color: $fg_color;
      transition-duration: 0.1s;
      &:hover,
      &:active { color: $fg_color; }

      label.compressed-entries-label { // hard-coded background-color?
        background-image: image($suggested_color);
        color: $dark_contrast_color;
        font-weight: 700;
      }

      &.compressed-row {
        background-image: image(darken($bg_color, 3%));
        color: darken($fg_color, 20%);
        transition-property: opacity, // exclude background-color
                             border-image,
                             background-image,
                             box-shadow;
        &:hover {
          background-image: image(mix($fg_color, $bg_color, 5%));
          color: $fg_color;
        }
        &:active {
          &, &:focus {
            background-image: image(mix($fg_color,
                                        $bg_color, 10%));
            color: $fg_color;
            animation: none;
          }
        }

        &.popover-activated-row {
          background-image: image($primary_color);
          color: $dark_contrast_color;
        }

        &-header {
          background-image: image($base_color); // stop highlighting
          background-color: $base_color; // stop highlighting
          color: $primary_color;
          &:hover {
            background-image: image(mix($primary_color,
                                        $base_color, 5%));
          }
          &:active {
            &, &:focus {
              background-image: image(mix($primary_color,
                                          $base_color, 10%));
              color: $primary_color;
              animation: none;
            }
          }

          label.compressed-entries-label {
            background-image: image($primary_color);
            color: $dark_contrast_color;
            transition-duration: 0s;
          }
        }
      }
    }
  }
}

/***********
 * Builder *
 ***********/
// based css:
// https://git.gnome.org/browse/gnome-builder/tree/data/theme
// hard-coded css:
// https://git.gnome.org/browse/gnome-builder/tree/data/theme/shared.css

// Titlebar adjustments for workbench
//
// This is needed due to our placement of headerbar inside of a
// stack. We were seeing black edges around the header bar, and
// improper radius on the headerbar.
//
workbench stack.titlebar {
  padding: 0;
  // box-shadow: none;
}

workbench:not(.tiled):not(.maximized):not(.fullscreen) stack.titlebar headerbar {
  border-radius: 2px 2px 0 0;
  // box-shadow: none;
}

perspectiveswitcher {
  background-color: $bg_color;
}

perspectiveswitcher button:checked {
  color: $primary_color;
}

// Layout tab and tab bar tweaks
// The following makes the layout stack header look similar to a tab bar.
layouttabbar {
  border-bottom: 1px solid $borders_color;
  background-color: $bg_color;
}

layouttabbar button { @extend %flat_button; }

layouttabbar > box > button {
  margin: (40px - $medium_size) / 2 0;
  // border-radius: 0;
}

layouttab {
  margin: 0 8px; // not working
  border-style: none solid;
  border-width: 1px;
  border-color: $borders_color;
  box-shadow: inset 0 -2px $primary_color;
  background-color: $base_color;
}

layouttab separator.vertical {
  margin: 8px 4px;
}

layouttab button {
  &.text-button, &.image-button, & {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 4px;
  }
}

// Close button styling for layouttab.
layouttab > box > button.close {
  border-radius: $circular_radius;
}

layout {
  border: 1px solid $borders_color;
  -PnlDockBin-handle-size: 1;
}

entry.search-missing {
  background-color: $error_color;
  color: $inversed_fg_color;
}

// tweak icons for treeviews
workbench treeview.image { color: gtkalpha(currentColor, $hint_opacity); }
workbench treeview.image:selected { color: $tertiary_inversed_fg_color; }

dockbin {
  border: 1px solid $borders_color;
  -PnlDockBin-handle-size: 1;
}

dockpaned {
  border: 1px solid $borders_color;
}

eggsearchbar box.search-bar {
  padding: 0 8px;
  border-bottom: 1px solid $borders_color;
  background-color: $bg_color;
}

docktabstrip {
  padding: 0 8px;
  border-bottom: 1px solid $borders_color;
  background-color: $bg_color;
}

docktab {
  transition: $longer_transition;
  min-height: $small_size;
  min-width: $small_size;
  margin-bottom: -1px;
  padding: $container_padding 6px;

  outline-offset: -6px;

  border-width: 1px;         // for reorderable tabs
  border-color: transparent; //

  color: $secondary_fg_color;
  font-weight: 500;

  &:hover {
    box-shadow: inset 0 -2px $track_color;
    color: $fg_color;
  }

  &:checked {
    animation: tab_ripple_effect $longer_duration * 3 $deceleration_curve;
    box-shadow: inset 0 -2px $primary_color;
    color: $fg_color;
  }
}

dockoverlayedge {
  background-color: $bg_color;
}

dockoverlayedge docktabstrip {
  padding: 0;
  border: none;
}

dockoverlayedge.left-edge docktab {
  &:hover { box-shadow: inset -2px 0 $track_color; }
  &:checked { box-shadow: inset -2px 0 $primary_color; }
}

dockoverlayedge.right-edge docktab {
  &:hover { box-shadow: inset 2px 0 $track_color; }
  &:checked { box-shadow: inset 2px 0 $primary_color; }
}

pillbox {
  background-color: $bg_color;
  border-radius: 2px;
}

buildperspective row {
  padding: 10px;
}

layoutpane entry.search {
  @extend %entry.flat;

  box-shadow: inset 0 -1px $borders_color;
  background-color: $base_color;
}

editortweak entry.search {
  @extend %entry.flat;

  margin-bottom: -1px;
  box-shadow: none;
}

//
// let's tweak hard-coded elements
//

// styling for editor search
frame.gb-search-frame {
  // border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.gb-search-entry-occurrences-tag {
  box-shadow: none;
  background-color: transparent;
}

// Keep search bar and layouttab height in sync.
docktabstrip {
  min-height: 39px;
}

layouttabbar > box {
  // min-height: 39px;
}

eggsearchbar > revealer > box {
  // min-height: 39px;
}

eggsearchbar entry {
  // min-height: 24px;
}

workbench preferences preferencesgroup list entry {
  // background: none;
  // min-height: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
}


/**********
 * Photos *
 **********/
// based css:
// https://git.gnome.org/browse/gnome-photos/tree/data/Adwaita.css

GdMainIconView.content-view {
  -GdMainIconView-icon-size: 48;
}

// Make spinner visible on both dark and bright backgrounds w/o making
// it look ugly/weird.
GdMainIconView.content-view.cell:active {
  // color: $tertiary_fg_color;
}

.documents-counter {
  margin: 8px;
  border-radius: $circular_radius;
  box-shadow: $z-depth-2;
  background-color: $accent_color;
  color: $inversed_fg_color;
  font-weight: bold;
}

.photos-entry-tag {
  @extend .documents-entry-tag;
}

.documents-scrolledwin.frame {
  border-style: none;
}

.photos-icon-bg {
}

.photos-fade-in {
  opacity: 1;
  transition: opacity $shorter_duration $deceleration_curve;
}

.photos-fade-out {
  opacity: 0;
  transition: opacity $shorter_duration $deceleration_curve;
}

.photos-collection-icon {
}

overlay grid.horizontal > revealer > scrolledwindow.frame {
  &:dir(ltr) { border-style: none none none solid; }
  &:dir(rtl) { border-style: none solid none none; }
}


/*********
 * Music *
 *********/
// hard-coded css:
// https://git.gnome.org/browse/gnome-music/tree/data/application.css

.side-panel:dir(ltr) {
  // border-width: 0 1px 0 0;
  border-style: solid;
  border-color: $borders_color;
}

.side-panel:dir(rtl) {
  // border-width: 0 0 0 1px;
  border-style: solid;
  border-color: $borders_color;
}

.side-panel .view {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
  background-image: image($lighter_bg_color);

  &:hover { background-image: image(mix($fg_color, $lighter_bg_color, percentage(0.05))); }
}

.side-panel .view:selected {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
  background-image: image($primary_color);

  &:hover { background-image: image(mix($inversed_fg_color, $primary_color, percentage(0.05))); }
}

.playlists-list {
  // box-shadow: inset 0 -1px @view_separators;
}

.songs-list {
  // box-shadow: inset 0 1px shade(@borders, 1.30);
  // background-color: @theme_bg_color;

  &:hover { background-image: image($row_track_color); }
}

frame.documents-dropdown {
  @extend toolbar.osd;

  margin: 8px;

  > border { border: none; }
}

box.vertical:not(.titlebar) > revealer > toolbar.search-bar {
  border-bottom: 1px solid $borders_color;

  button > widget {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    // -GtkArrow-arrow-scaling: 1;
  }
}

// /************************
//  * Gnome Control Center *
//  ************************/

// users section

stack > box.vertical > widget > overlay grid.horizontal > stack {
  > button.toggle { box-shadow: none; border: 1px solid $borders_color; }
}

// > 3.25.90
scrolledwindow.view > viewport.frame > stack > list { // left-pane
  > row.activatable { }
}

box.horizontal.titlebar > headerbar > stack > box.vertical {
  > .title { margin: 0; }
  > .subtitle { margin: -3px 0; }
}

dialog.background.csd {
  > headerbar.titlebar {

    > label:not(.title):not(.subtitle) {
      font-weight: 700;
    }
  }
}

/*********
 * To Do *
 *********/
task-row {
  transition: $shorter_transition;
  margin: 0 -4px;

  &:hover { transition: none; }

  label { margin: 0 8px; }

  image { margin: 0 4px; }
}

task-list-view > box > revealer > box > button {
  min-height: $medium_size;
  margin: -4px;
  padding: 0 12px;

  label { margin: 0 8px; }

  image { margin: 0 4px; }
}


/*******
 * eog *
 *******/
#eog-thumb-nav {
  scrolledwindow { border-top: none; }

  button { -gtk-outline-radius: 2px; }
}


/*************
 * Evolution *
 *************/
frame.taskbar > border { border-style: solid none none; }

box.vertical > paned.horizontal notebook widget .frame { border-style: none; }


/********
 * gitg *
 ********/
frame.commit-frame > border { border-style: solid none none; }


/**************
 * Characters *
 **************/
box.dialog-vbox scrolledwindow.related { border: 1px solid $borders_color; }

list.categories { background-image: image($lighter_bg_color); }


/**************
 * Calculator *
 **************/
button.title label { min-height: $medium_size; }


/************
 * Terminix *
 ************/
.terminix-background box.vertical > widget > box.horizontal {
  padding: 3px 0 2px;
  // border-bottom: 1px solid $borders_color;

  button {
    padding: 4px 8px;

    &.image-button { padding: 4px; }
  }
}

.terminix-background revealer > frame > border {
  // border-style: none none solid;
  border-style: none;
}

button.image-button.session-new-button { min-width: $medium_size - 4px; }

overlay > revealer.left > scrolledwindow.frame,
overlay > revealer.right > scrolledwindow.frame {
  border-style: none;
  box-shadow: $z-depth-4;
}

overlay > revealer.left > scrolledwindow.frame {
  margin-right: 32px;
  // border-style: none solid none none;
}

overlay > revealer.right > scrolledwindow.frame {
  margin-left: 32px;
  // border-style: none none none solid;
}

.terminix-session-sidebar { background-image: image($lighter_bg_color); }


/***********
 * Eclipse *
 ***********/
window.background > box.vertical > scrolledwindow > widget toolbar {
  padding: 2px;

  separator,
  button { margin: 2px; }

  button { border-radius: 2px; }
}

//
// * Firefox and Thunderbird *
//

$firefox_border_color: $borders_color;
$firefox_theme_color: if($color == 'black', #666666, $primary_color);
$firefox_fg_color: if($variant =='light', $secondary_fg_color, #aaaaaa);
$firefox_bg_color: if($variant =='light', $lighter_bg_color, #666666);

// templates for the fallback mode buttons
%button_fallback_normal {
  border: 1px solid $borders_color;
  background-color: $lighter_bg_color;
  color: $secondary_fg_color;
  box-shadow: none;
}

%button_fallback_hover {
  border: 1px solid $borders_color;
  background-color: mix($lighter_bg_color, $fg_color, 96%);
  color: $fg_color;
  box-shadow: none;
}

%button_fallback_active {
  border: 1px solid $borders_color;
  background-color: mix($lighter_bg_color, $fg_color, 92%);
  color: $fg_color; // do not use inverted colours
  box-shadow: none;
  animation: none;
}

%button_fallback_insensitive {
  border: none;
  background-color: mix($bg_color, $fg_color, 96%);
  color: $disabled_fg_color;
  box-shadow: none;
}

%button_fallback_checked_insensitive {
  border: none;
  background-color: mix($primary_color, $lighter_bg_color, 20%);
  color: mix($primary_color, $lighter_bg_color, 40%);
  box-shadow: none;
}

// templates for the fallback mode entries
%entry_fallback_normal {
  border: 1px solid $borders_color;
  border-image: none;
  background-color: $lighter_bg_color;
  color: $secondary_fg_color;
  box-shadow: none;
}

%entry_fallback_focus {
  border: 1px solid $primary_color;
  border-image: none;
  background-color: $lighter_bg_color;
  color: $fg_color;
  box-shadow: none;
}

%entry_fallback_insensitive {
  border: 1px solid $borders_color;
  border-image: none;
  background-color: mix($bg_color, $fg_color, 96%);
  color: $disabled_fg_color;
  box-shadow: none;
}

%_html_button_spacing {
  min-width: unset; // do not set min-width/height
  min-height: unset;
  padding: 4px 8px 5px;
}

%_html_entry_spacing {
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
}

%firefox_selected_items {
  background-color: if($color == 'black', #686868, $primary_color);
  color: $inversed_fg_color;
  &:disabled { color: $disabled_inversed_fg_color; }
}

window.background:not(.csd) {
  > widget {
    // for the bookmark toolbar's separators
    > separator { color: $firefox_border_color; }

    // avoid black border
    > scrollbar { background-clip: border-box; }

    // emphasize borders color
    > scrollbar,
    > frame > border { border-color: $firefox_border_color; }

    > entry,
    > button > button {
      border: 1px solid $firefox_border_color;
      border-radius: 2px + 1px;
      box-shadow: none;
    }

    > entry {
      @extend %_html_entry_spacing;
      // enforce fallback entries inside the HTML pages
      @extend %entry_fallback_normal;
      border-radius: 2px;
      &:focus { @extend %entry_fallback_focus; }
      &:disabled { @extend %entry_fallback_insensitive; }
    }

    > button {
      &, &.combo {
        > button { // enforce fallback buttons inside the HTML pages
          @extend %button_fallback_normal;
          &:hover { @extend %button_fallback_hover; }
          &:active,
          &:checked { @extend %button_fallback_active; }
          &:disabled { @extend %button_fallback_insensitive; }
          &:checked:disabled {
            @extend %button_fallback_checked_insensitive;
          }
        }
      }

      &.combo, // generic button and combo spacing
      & { @extend %_html_button_spacing; }

      // toolbar combo buttons in 'downloads' sub-window
      &:not(.combo) > button { @extend %_html_button_spacing; }
    }

    // use 16px assets for hard-coded sizing
    > checkbutton > check { @extend %small_check; }
    > radiobutton > radio { @extend %small_radio; }

    // remove ugly border around the menus
    > window > menu,
    > menu > menu { border: none; }

    // Firefox now uses this for selected items
    text:selected { @extend %firefox_selected_items; }
    text { color: $firefox_fg_color; }

  }
}

// for backwards compatibility
window.background:not(.csd) {
  > widget {
    > menubar {
      color: $secondary_headerbar_fg_color;

      &:hover { color: $headerbar_fg_color; }

      &:disabled { color: $disabled_headerbar_fg_color; }
    }

    > frame { color: $firefox_border_color; }

    > checkbutton > check,
    > radiobutton > radio {
      min-height: 16px;
      min-width: 16px;
      margin: 0;
      padding: 0;
    }
  }

  > menu > separator { color: $borders_color; }
  > menu > menuitem > label:disabled { color: $disabled_menu_fg_color; }
}

// /*******************
//  * Firefox Quantum *
//  *******************/

#MozillaGtkWidget.background {
  &,
  decoration { border-radius: 2px 2px 0 0; } // enforce radius

  // FIXME: unset all our specific titlebuttons
  // until upstream stops rendering useless (weird) icons
  headerbar.titlebar {
    border-radius: 2px 2px 0 0;
    border-top: 1px solid $borders_color;

    &.default-decoration button.titlebutton {
      min-width: 16px;
      min-height: 16px;
      margin: 6px 2px;
      padding: 0;
    }
  }

  // blend with weird toolbar backgrounds
  background-color: $alt_base_color;

  // FIXME: resetting child elements background is not fully functional yet
  // because WidgetStyleCache keeps holding initial background-color.
  // the stem of this incorrect colouring seems to be caused by their
  // gdk_rgba to ns_rgba conversion. I don't think theme's fault.
  .background,
  frame,
  separator,
  scrolledwindow { background-color: $bg_color; }

  scrollbar { background-color: transparent; }

  *:not(menuitem):hover, // exclude menuitem node
  *:focus,
  *:active,
  *:checked {
    &, button { color: $fg_color; } // enforce opaque foregrounds
  }

  > window.background > menu { // context-menus
    background-color: $base_color;

    // revert to standard separators
    > separator {
      padding: 0;
      border: none;
      background-color: $borders_color;
    }

    > menuitem > radio { @extend %small_radio; }
    > menuitem > check { @extend %small_check; }

    // check/radio inside selected-menu
    @each $w in ('check'),
                ('radio') {

      // standard checks and radios
      @each $s, $c in ('', gtkalpha(currentColor, $hint_opacity)),
                      (':indeterminate', $alt_theme_color),
                      (':checked', $alt_theme_color),
                      (':hover', $dark_contrast_color),
                      (':indeterminate:hover', $dark_contrast_color),
                      (':checked:hover', $dark_contrast_color),
                      (':disabled', gtkalpha($dark_contrast_color, 0.5)),
                      (':indeterminate:disabled', gtkalpha($dark_contrast_color, 0.5)),
                      (':checked:disabled', gtkalpha($dark_contrast_color, 0.5)) {

            > menuitem > #{$w}#{$s} { color: $c; }
      }
    }

  }

  > widget {
    border { border-color: $borders_color; }

    separator { background-color: $borders_color; }

    // FIXME: this affected to popover widget as well,
    // so we can not set $lighter_bg_color to search-bar...
    > scrolledwindow > textview {
      background-color: if($variant == 'light', $base_color, lighten($base_color, 0%));

      text {
        background-color: transparent;
        color: $firefox_fg_color;
        &:selected,
        &:selected:focus,
        selection { @extend %firefox_selected_items; }
      }
    }

    > button {
      &, &.combo {
        > button { // enforce fallback buttons inside the HTML pages
          @extend %button_fallback_normal;
          &:hover { @extend %button_fallback_hover; }
          &:active,
          &:checked { @extend %button_fallback_active; }
          &:disabled { @extend %button_fallback_insensitive; }
          &:checked:disabled {
            @extend %button_fallback_checked_insensitive;
          }
        }
      }

      &.combo, // generic button and combo spacing
      & { @extend %_html_button_spacing; }

      // toolbar combo buttons in 'downloads' sub-window
      &:not(.combo) > button { @extend %_html_button_spacing; }
    }

    > entry {
      @extend %_html_entry_spacing;
      // enforce fallback entries inside the HTML pages
      @extend %entry_fallback_normal;
      border-radius: 2px;
      &:focus { @extend %entry_fallback_focus; }
      &:disabled { @extend %entry_fallback_insensitive; }
    }

  %firefox_check_radio {
    color: #888888;
    &:hover { color: gtkalpha(#888888, 0.75); }
    &:checked, &:indeterminate { color: $firefox_theme_color; }
    &:checked:hover, &:indeterminate:hover { color: gtkalpha($firefox_theme_color, 0.8); }
    &:disabled { color: gtkalpha(#888888, 0.5); }
    &:checked:disabled, &:indeterminate:disabled { color: gtkalpha($firefox_theme_color, 0.5); }
 }

    // use 16px assets for hard-coded sizing
    > checkbutton > check { @extend %small_check; @extend %firefox_check_radio; }
    > radiobutton > radio { @extend %small_radio; @extend %firefox_check_radio; }
    > check,
    > radio { // unset all
      min-width: 16px;
      min-height: 16px;
      margin: 0;
      padding: 0;
      background-image: none;
      transition: none;
    }
  }
}

 /***************
  * Chrome(ium) *
  ***************/

window.background.chromium {
  // checked-tab & toolbar & button widgets
//  background-color: $bg_color;
//  color: $text_color;

  headerbar.titlebar {
    button.toggle { // account-button (> 64.0.3282?)
      border: none;
      min-height: 22px;
      margin: 6px 0;
      padding: 0 10px;
    }

    // from nav_button_provider_gtk3.cc (> 62.0.3202?)
    button.titlebutton { // title-buttons
      // define global titlebutton class sizing
      min-width: 16px; // > 16px causes image blurring
      min-height: 16px;
      margin: 0 4px; // unset margins
      padding: 0;
      border: none;
    }
  }

  // FIXME: not for actual button widgets but for toolbar's separators
  // crazy: src/+/master/chrome/browser/ui/libgtkui/gtk_ui.cc#891
  button { // for active-tab borders
    border-width: 1px;
    border-style: solid;
    border-color: $borders_color;
  }

  entry.chromium {
    & { // overrides standard borders
      border-image: none;
      border: 1px solid $borders_color;
    }
    &:focus { // overrides standard borders
      border-image: none;
      border: 1px solid $primary_color;
    }
  }

  // internal region of toolbar's entry widget
  > textview.view { background-color: $base_color; }
}


/***********
 * Synapse *
 ***********/
window.background > box.vertical > widget > widget:selected { background-color: $primary_color; }


/****************
 * Libre-Office *
 ****************/

window.background:not(.csd):not(.solid-csd) {
// reserved area at the most-right side of GtkMenuBar
  > grid.horizontal > grid.horizontal {
    background-color: $headerbar_bg_color;

    > button.flat.small-button { // 'close' button
      color: $headerbar_fg_color;
      &:hover,
      &:active,
      &:checked { color: $secondary_headerbar_fg_color; }
      &:disabled { color: $disabled_headerbar_fg_color; }
    }
  }
}

window.background:not(.solid-csd) {
  // for 'Notebookbar' toolbar
  > notebook:not(.frame) {
    border: 0 none transparent; // unset borders
    background-color: $base_color;

    > stack {
      border: none;
      box-shadow: none;
    }
  }
}

//
//  * Geary *
//

.geary-titlebar-left,
.geary-titlebar-right {
  // remove unexpected "hardcoded" vertical separator
  separator { opacity: 0; }
}

/*********
 * Unity *
 *********/
// based css:
// http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/view/head:/Ambiance/gtk-3.20/apps/unity.css

// Decorations
UnityDecoration {
  -UnityDecoration-extents: 28px 0 0 0;
  -UnityDecoration-input-extents: 10px;

  -UnityDecoration-shadow-offset-x: 0;
  -UnityDecoration-shadow-offset-y: 3px;
  -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.48);
  -UnityDecoration-active-shadow-radius: 12px;
  -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.32);
  -UnityDecoration-inactive-shadow-radius: 6px;

  -UnityDecoration-glow-size: 8px;
  -UnityDecoration-glow-color: $primary_color;

  -UnityDecoration-title-indent: 10px;
  -UnityDecoration-title-fade: 35px;
  -UnityDecoration-title-alignment: 0.0;
}

UnityDecoration .top {
  padding: 3px 8px 3px 8px;
  border-radius: 2px 2px 0px 0px;
  box-shadow: inset 0 1px $secondary_highlight_color;
  background-color: $headerbar_bg_color;
  color: $headerbar_fg_color;
}

UnityDecoration .top:backdrop {
  color: gtkalpha($headerbar_fg_color, 0.9);
}

UnityDecoration .left,
UnityDecoration .right,
UnityDecoration .bottom {
  background-color: $headerbar_bg_color;
}

UnityDecoration.menuitem,
UnityDecoration .menuitem {
  color: gtkalpha(currentColor, $enabled_opacity);
}

UnityDecoration.menubar.menuitem:hover,
UnityDecoration.menubar .menuitem *:hover {
  box-shadow: inset 0 -2px $primary_color;
  background-color: transparent;
  color: currentColor;
}

.background:not(.csd) headerbar:not(.titlebar) {
  border-radius: 0;
  box-shadow: none;

  &.inline-toolbar { border-style: none; }
}

SheetStyleDialog.unity-force-quit {
  // background-color: $bg_color;
}

// Panel Style
UnityPanelWidget,
.unity-panel {
  background-color: $topbar_bg_color;
  background-image: image($topbar_bg_color);
  color: $topbar_fg_color;
}

UnityPanelWidget:backdrop,
.unity-panel:backdrop {
  color: $secondary_headerbar_fg_color;
}

.unity-panel.menubar,
.unity-panel .menubar {
}

.unity-panel.menuitem,
.unity-panel .menuitem {
  color: gtkalpha(currentColor, $enabled_opacity);
}

.unity-panel.menubar.menuitem:hover,
.unity-panel.menubar .menuitem *:hover {
  box-shadow: inset 0 -2px $primary_color;
  background-color: transparent;
  color: currentColor;
}

@keyframes playbackmenuitem_spinner {
  to { -gtk-icon-transform: rotate(1turn); }
}

.menu IdoPlaybackMenuItem.menuitem:active {
  -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
  animation: playbackmenuitem_spinner 1s infinite linear;
  color: $primary_color;
}

// Unity Calendar //

menuitem calendar,
menuitem calendar .button,
menuitem calendar .header,
menuitem calendar .view {
    background-color: $menu_bg_color;
    color: $menu_fg_color;
    padding: 2px 6px;
}
// Unity Music Control Button //
